<!-- eslint-disable vue/no-parsing-error -->
<template>
  <div class="container">
    <div class="month-title">
      <div><el-button type="text" plain @click="lastYear"><<</el-button></div>
      <div>{{ year }}年</div>
      <div><el-button type="text" plain @click="nextYear">>></el-button></div>
    </div>
    <el-divider style="width: 92%; margin-left: 2vw"></el-divider>
    <div class="month-table">
      <table>
        <tbody>
          <tr>
            <td>第一季度</td>
            <td>第二季度</td>
          </tr>
          <tr>
            <td>第三季度</td>
            <td>第四季度</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { getStatis } from "@/api/getList.js";
const date = ref(new Date());
const year = ref(date.value.getFullYear());
const getStatisData = () => {
  const data = {
    year: year.value,
    dimension: 3,
  };
  getStatis(data).then((res) => {
    console.log(res);
  });
};
const lastYear = () => {
  year.value--;
  getStatisData();
};
const nextYear = () => {
  year.value++;
  getStatisData();
};
onMounted(() => {
  getStatisData();
});
// eslint-disable-next-line vue/no-parsing-error
</script>
<style lang="less" scoped>
.container {
  height: 50vh !important;
  display: flex;
  flex-direction: column;
  .month-title {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }
  .month-table {
    height: 100%;
    table {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      tbody {
        height: 100%;
        tr {
          height: 15vh;
          width: 60vw;
          margin: 0 5vw;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-around;
          align-items: center;
          .td {
            width: 5vw;
          }
        }
      }
    }
  }
}
</style>
